<template>
	<view class="container">
		<!-- 会员 -->
		<view class="" v-if="vk.vuex.get('$user.userInfo.plus_type') == 1">
			<!-- <view class="top">
				<form @submit="setUserinfo">
					<view style="margin: 50rpx 30rpx;">
						<button class="avatar-wrapper" @click="getUserInfo">
							<image class="avatar" :src="avatarUrl||'/static/user.png'"></image>
						</button>
					</view>

					<view style="margin: 50rpx 50rpx;">
						<input class="uni-input" name="nickname" focus placeholder="请填写用户昵称" type="nickname"
							v-model="nickname"></input>
					</view>

					<view style="width: 350rpx;margin-left: 200rpx;">
						<button type="primary" form-type="submit">修改用户信息</button>
					</view>
				</form>
			</view> -->

			<view class="top_pu">
				<view class="admin_box">
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<image class="avatar" @click="getUsername"
							:src="vk.vuex.get('$user.userInfo.avatar')||'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1668928062708-assets/web-upload/764843cf-055a-4cb6-b5d3-dca528b33fd4.jpeg'">
						</image>
						<view>
							<view class="flex_nickname" @click="getUsername">
								<view class="nickname">{{vk.vuex.get('$user.userInfo.nickname')||'游客'}}</view>
								<u-icon name="reload" color="#fff" size="32rpx"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="vip_cart" @click="jump('/pages_sub/recharge/recharge')">
				<view class="vip_cart_left">
					<view class="vip_cart_left_top">
						<view class=" li" v-if="vk.vuex.get('$user.userInfo.plus_expire_time')>
							vk.pubfn.getCommonTime(new Date()).todayEnd ">
							会员到期日<text
								style="margin: 0 10rpx;">:</text>{{vk.pubfn.timeFormat(vk.vuex.get('$user.userInfo.plus_expire_time'),"yyyy-MM-dd")||"未登录"}}
						</view>
						<view class=" li" v-else>
							今日会员剩余<text style="margin: 0 10rpx;">:</text>{{timeStr||"未登录"}}
						</view>
						<view class=" li" style="margin-top: 10rpx;">
							我的邀请码<text
								style="margin: 0 10rpx;">:</text>{{vk.vuex.get('$user.userInfo.my_invite_code')||"未登录"}}
						</view>
					</view>
					<view class="vip_cart_left_botton li">
						我的金豆<text style="margin: 0 10rpx;">:</text>{{vk.vuex.get('$user.userInfo.balance')||0}}
					</view>
				</view>
				<view class="vip_cart_right">
					<view v-if="vk.vuex.get('$app.osName')=='ios'&&!vk.vuex.get('$user.userInfo.invite_code')">
					</view>
					<view v-else>
						<view v-if="vk.vuex.get('$app.osName')!='ios'||vk.vuex.get('$app.appinfo.iospay')">
							充值
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 非会员 -->
		<view class="" v-else>
			<view class="top_pu">
				<view class="admin_box">
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<image class="avatar" @click="getUsername"
							:src="vk.vuex.get('$user.userInfo.avatar')||'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1668928062708-assets/web-upload/764843cf-055a-4cb6-b5d3-dca528b33fd4.jpeg'">
						</image>
						<view>
							<view class="flex_nickname" @click="getUsername">
								<view class="nickname">{{vk.vuex.get('$user.userInfo.nickname')||'游客'}}</view>
								<u-icon name="reload" color="#fff" size="32rpx"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="vip_cart_pu" @click="jump('/pages_sub/recharge/recharge')">
				<view class="vip_cart_pu_left">
					<view class="vip_cart_pu_left_top">
						<view class="lis">
							注册日期<text
								style="margin: 0 10rpx;">:</text>{{vk.pubfn.timeFormat(vk.vuex.get('$user.userInfo.register_date'),"yyyy-MM-dd")||"未登录"}}
						</view>
						<view class="lis" @click="copyText(info.my_invite_code)">
							我的邀请码<text
								style="margin: 0 10rpx;">:</text>{{vk.vuex.get('$user.userInfo.my_invite_code')||"未登录"}}
						</view>
					</view>
					<view class="vip_cart_pu_left_botton lis">
						我的金豆<text style="margin: 0 10rpx;">:</text>{{vk.vuex.get('$user.userInfo.balance')||0}}
					</view>
				</view>
				<view class="vip_cart_right">
					<view v-if="vk.vuex.get('$app.osName')=='ios'&&!vk.vuex.get('$user.userInfo.invite_code')">
					</view>
					<view v-else>
						<view v-if="vk.vuex.get('$app.osName')!='ios'||vk.vuex.get('$app.appinfo.iospay')">
							充值
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-gap height="200rpx"></u-gap>

		<!-- 导航栏图标自定义组件navbar -->
		<djnavbar :iconList="vk.vuex.get('$app.ucenter_icons')"></djnavbar>


		<view style="width: 80%;margin:40rpx 75rpx;" v-if="vk.vuex.get('$app.index_activity.xcx_kefu')">
			<button class="buttona" open-type="im" :data-im-id="vk.vuex.get('$app.dykefu')" bindim="imCallback"
				binderror="onimError" shape="circle">
				<span style="color: white;">{{xcx_kefu_text}}</span>
			</button>
		</view>




	</view>
</template>

<script>
	const db = uniCloud.database();
	import djnavbar from '@/components/navbar/navbar.vue';
	export default {
		components: {
			djnavbar
		},
		data() {
			return {
				timer: null, //定时器
				timeStr: "登陆中", //格式化的时间
				// imId: vk.vuex.get('$app.dykefu'),
				xcx_kefu_text: vk.vuex.get('$app.index_activity.xcx_kefu_text') || "联系客服",
				bindmobile: true,
				sessionKey: "",
				encryptedKey: "",
				info: {
					avatar: 'https://www.hedianshop.com/web/uploads/mall2321/20220506/e1599a204fd0f6264aab76a39348f860.png',
					nickname: "匿名用户",
					balance: 0,
					mobile: ""
				},
				// baseList: [],

			}
		},
		onLoad() {},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		async onShow() {
			this.timer = setInterval(() => {
				this.timeStr = vk.vuex.get('timeStr')
			}, 500);
			//当找到对应数据时，替换掉默认数据
			// if (vk.vuex.get('$app.ucenter_icons').length > 0) {
			// 	this.baseList = []
			// 	this.baseList = vk.vuex.get('$app.ucenter_icons')
			// }
			let that = this;
			let uid = vk.vuex.get('$user.userInfo._id');
			//判断用户登录状态(token有效)
			if (uid && vk.checkToken()) {
				vk.userCenter.getCurrentUserInfo({
					success: (data) => {
						vk.vuex.set('$user.userInfo', data.userInfo)
						uni.vk.myfn.updataTime();
						that.info = [];
						that.info = data.userInfo
						console.log("用户信息存入本地缓存", data.userInfo);
					}
				});
			} else {
				console.log("执行了自定义登录函数");
				await uni.vk.myfn.ttlogin();
			}

		},
		methods: {

			tapMakePhoneCall() {
				const inputText = vk.vuex.get('$app.index_activity.xcx_kefu_text')
				const regex = /[0-9]{11}/g;
				const matchedTokens = inputText.match(regex);



				const sevenLetterToken = matchedTokens && matchedTokens.length > 0 ? matchedTokens[0] : '';

				console.log("手机号", matchedTokens);
				tt.makePhoneCall({
					phoneNumber: matchedTokens[0],
					success(res) {
						// 调用成功 makePhoneCall:ok
						console.log("调用成功", res.errMsg);
					},
					fail(res) {
						// 调用失败 makePhoneCall:fail
						console.log("调用失败", res.errMsg);
					},
				});

			},


			jump(url) {
				if (url == "kefu") {
					wx.openCustomerServiceChat({
						extInfo: {
							url: vk.vuex.get('$app.appinfo.workwxurl'),
						},
						corpId: vk.vuex.get('$app.appinfo.workwxappid'),
						success(res) {
							调用客服成功
						}
					})
					return;
				}
				if (url == "/pages/Tabbar/watching/watching" || url == "/pages/Tabbar/tj/tj" || url ==
					"/pages/index/index") {
					uni.switchTab({
						url: url
					})
					return;
				}
				if (url == "/pages/index/index" || url == "/pages/Tabbar/my/my") {
					uni.switchTab({
						url: url
					})
					return;
				}

				console.log(url);
				uni.navigateTo({
					url: url
				})
			},

			getUsername() {
				uni.navigateTo({
					url: "/pages_sub/setUserinfo/setUserinfo"
				})
			},

			support() {
				uni.makePhoneCall({
					phoneNumber: "15717117711"
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f8fa;
	}

	.grid-item {
		background-color: #ff5500;
	}

	.container {
		position: relative;
		height: 100vh;
	}

	.top_title {
		position: absolute;
		color: #fff;
		top: 8%;
		left: 50%;
		transform: translateX(-50%);
	}

	.my_invite_code {
		margin-top: 10rpx;
	}

	.vip_cart {
		width: 678rpx;
		height: 342rpx;
		position: absolute;
		top: 13%;
		left: 50%;
		transform: translateX(-50%);
		background-image: url(../../../static/my/cart.png);
		background-size: cover; // 背景图按比例缩放以填充整个元素
		background-repeat: no-repeat; // 背景图不进行重复
		background-position: center; // 背景图水平垂直居中

		.vip_cart_left {

			width: 374rpx;
			height: 188rpx;
			// background-color: #fff;
			margin: 100rpx 100rpx 100rpx 34rpx;

			.vip_cart_left_botton {
				margin-top: 79rpx;
			}
		}



		.vip_cart_right {

			width: 100rpx;
			height: 100rpx;
			position: absolute;
			right: 0.2%;
			bottom: 1%;
			color: #5c51f9;
			font-size: 12px;
			font-weight: 700;
		}
	}

	.vip_cart_pu {
		width: 678rpx;
		height: 342rpx;
		position: absolute;
		top: 16%;
		left: 50%;
		transform: translateX(-50%);
		background-image: url(../../../static/my/cart1.png);
		background-size: cover; // 背景图按比例缩放以填充整个元素
		background-repeat: no-repeat; // 背景图不进行重复
		background-position: center; // 背景图水平垂直居中

		.vip_cart_pu_left {
			width: 374rpx;
			height: 188rpx;
			// background-color: #fff;
			margin: 100rpx 100rpx 100rpx 34rpx;

			.vip_cart_pu_left_botton {
				margin-top: 70rpx;
			}
		}

		.vip_cart_right {

			width: 100rpx;
			height: 100rpx;
			position: absolute;
			right: 0.2%;
			bottom: 1%;
			color: #2f8dfb;
			font-size: 12px;
			font-weight: 700;
		}

	}

	.li {
		font-size: 12px;
		color: #5c51f9;
		font-weight: 700;
	}

	.lis {
		font-size: 12px;
		color: #2f8dfb;
		font-weight: 700;
		margin-top: 16rpx;
	}

	.top {
		width: 750rpx;
		height: 320rpx;
		// background-color: #676bd4;
		background-image: url(../../../static/my/top1.png);
		background-size: cover; // 背景图按比例缩放以填充整个元素
		background-repeat: no-repeat; // 背景图不进行重复
		background-position: center; // 背景图水平垂直居中

	}

	.top_pu {
		width: 750rpx;
		height: 320rpx;
		// background-color: #676bd4;
		background-image: url(../../../static/my/top1.png);
		background-size: cover; // 背景图按比例缩放以填充整个元素
		background-repeat: no-repeat; // 背景图不进行重复
		background-position: center; // 背景图水平垂直居中
	}

	.bindtext {
		background-color: #984346;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 20rpx;
	}

	.bindtext1 {
		color: #fff;
		font-size: 26rpx;
	}


	.admin_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 80rpx 30rpx 30rpx 30rpx;

	}

	.avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 45rpx;
	}

	.flex_nickname {
		display: flex;
		align-items: center;
		width: 380rpx;
	}

	.nickname {
		color: #fff;
		font-size: 28rpx;
		margin: 0 12rpx 8rpx 20rpx;
		letter-spacing: 2rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.buttona::after {
		border: none;
	}

	.buttona {
		height: 38px;
		line-height: 35px;
		border-radius: 26px 26px;
		background-color: #f56c6c;
	}


	.dou1 {
		color: #fff4e3;
		font-size: 24rpx;
		margin: 0 0 0 20rpx;
	}

	.recharge {
		color: #fff;
		background-color: #f6c343;
		padding: 10rpx;
		border-radius: 100rpx;
		border: 4rpx solid #f29900;
		width: 160rpx;
		text-align: center;
		letter-spacing: 2rpx;
		height: 43rpx;
		font-size: 30rpx;
	}

	.member {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		background-color: #c3c2be;
		border-radius: 30rpx 30rpx 0 0;
		margin: 20rpx 30rpx 0 30rpx;
		padding: 20rpx;
	}

	.member_text {
		margin: 0 40rpx 0 20rpx;
		font-size: 32rpx;
		font-weight: 600;
		letter-spacing: 2rpx;
	}

	.u-button {
		background: linear-gradient(to right, #78b0fe, #7375ea);
		color: #fff !important
	}
</style>